<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>JPush Web SDK Demo</title>
<script type="text/javascript" th:src="@{/templates/js/jquery.min.js}"></script>
<script type="text/javascript"
	th:src="@{/templates/js/jpush-sdk-web.js}"></script>
<script type="text/javascript" th:src="@{/templates/js/helper.js}"></script>
<script th:inline="javascript" type="text/javascript">
	var userId;
	var language;

	function appendToDashboard(data) {
		$('#dashboard').append('<p>' + JSON.stringify(data) + '</p>');
	}

	var helper = new JPushHelper();
	helper
			.doGetLanguage(function() {
				return language
			})
			.doGetLoginUserId(function() {
				return userId
			})
			.doGetWegSignatrue(function(userStr, callback) {
				//getWegSignatrue，需要通过ajax调用服务器端的相关方法来获取签名等信息
				var url = "/jpush/device/web-sdk-initparams";
				var param = {
					"body" : {
						"userStr" : userStr
					},
					"domain" : "string",
					"language" : "EN_US",
					"terminal" : "WEB",
					"trackingChain" : "string",
					"version" : "string"
				}
				$.ajax({
					type : "POST",
					url : url,
					contentType : "application/json",
					data : JSON.stringify(param),
					success : function(signatrue, status, xhr) {
						if ((typeof signatrue) == "string") {
							signatrue = $.parseJSON(signatrue)
						}
						signatrue = signatrue.data
						callback({
							'user_str' : signatrue.userStr,
							'signature' : signatrue.signature,
							'appkey' : signatrue.appkey,
							'timestamp' : signatrue.timestamp,
							'random_str' : signatrue.random_str,
							'wsAddress' : signatrue.wsAddress,
							"languagePrefix" : signatrue.languagePrefix,
							"globalTags" : signatrue.globalTags,
							"debug" : signatrue.debug
						});
					},
					error : function(xhr, status, error) {
						callback(false)
					}
				});
			})
			.doSetAliasAndTags(
					function(regid, alias, tagsToAdd, tagsToRemove, callback) {
						alert(0)
						//setAliasAndTags,通过ajax调用服务器端的响应方法
						var url = "/jpush/device/setAliasAndTags";
						var param = {
							"body" : {
								"alias" : alias,
								"registrationId" : regid,
								"tagsToAdd" : !!tagsToAdd ? tagsToAdd
										.split(",") : null,
								"tagsToRemove" : !!tagsToRemove ? tagsToRemove
										.split(",") : null
							},
							"domain" : "string",
							"language" : "EN_US",
							"terminal" : "WEB",
							"trackingChain" : "string",
							"version" : "string"
						}
						$.ajax({
							type : "POST",
							url : url,
							contentType : "application/json",
							data : JSON.stringify(param),
							success : function(data, status, xhr) {
								callback(true, data.data.tags)
							},
							error : function(xhr, status, error) {
								callback(false)
							}
						});
						console
								.log("=======================================setAliasAndTags")
					}).onMsgReceive(function(data) {
				//msgRecevie，收到推送的信息
				appendToDashboard(data);
				console.log('receive msg:' + JSON.stringify(data));
			}).start()

	function setTags() {
		if (!helper)
			return;
		var tagsToAdd = $('#addTags').val();
		var tagsToRemove = $('#removeTags').val();
		helper.setTags(tagsToAdd, tagsToRemove, function(status, tags) {
			if (status === "success") {
				console.log("设置成功", tags)
			} else {
				console.log("设置失败", status)
			}
		});
	}

	function login() {
		userId = $('#userId').val();
	}

	function logout() {
		userId = null;
	}

	function setLanguage() {
		if (!helper)
			return;
		language = $("#language").val()
	}
</script>
</head>

<body>
	<br />
	<fieldset>
		<legend></legend>
		<table>
			<tr>
				<td><input style="width: 300px" type="text"
					placeholder="要添加的Tag" id="addTags" /></td>
				<td rowspan="3" align="center" valign="center">
					<button onclick="setTags()" style="height: 60px">setTags</button>
				</td>
			</tr>
			<tr>
				<td><input style="width: 300px" type="text"
					placeholder="要删除的Tag" id="removeTags" /></td>
			</tr>
		</table>
	</fieldset>
	<fieldset>
		<input style="width: 300px" type="text" placeholder="用户ID" id="userId" />
		<button onclick="login()">模拟登录</button>
		<button onclick="logout()">模拟登出</button>
	</fieldset>
	<fieldset>
		<input style="width: 300px" type="text" placeholder="语言" id="language" />
		<button onclick="setLanguage()">设置语言</button>
	</fieldset>
	<br />
	<div id="dashboard"
		style="width: 400px; min-height: 600px; background: black; color: white;"></div>
</body>


</html>
